<html>
  <head>
    <title>Bannerocity - Personalized Online Sky Banners</title>

    <link rel="stylesheet" type="text/css" href="bannerocity.css" />

    <script type="text/javascript">
      function validateNonEmpty(inputField, helpText) {
        // See if the input value contains any text
        if (inputField.value.length == 0) {
          // The data is invalid, so set the help message
          if (helpText != null)
            helpText.innerHTML = "Please enter a value.";
          return false;
        }
        else {
          // The data is OK, so clear the help message
          if (helpText != null)
            helpText.innerHTML = "";
          return true;
        }
      }

      function validateLength(minLength, maxLength, inputField, helpText) {
        // See if the input value contains at least minLength but no more than maxLength characters
        if (inputField.value.length < minLength || inputField.value.length > maxLength) {
          // The data is invalid, so set the help message
          if (helpText != null)
            helpText.innerHTML = "Please enter a value " + minLength + " to " + maxLength +
              " characters in length.";
          return false;
        }
        else {
          // The data is OK, so clear the help message
          if (helpText != null)
            helpText.innerHTML = "";
          return true;
        }
      }

      function placeOrder(form) {
        if (validateLength(1, 32, form["message"], form["message_help"]) &&
          validateNonEmpty(form["zipcode"], form["zipcode_help"]) &&
          validateNonEmpty(form["date"], form["date_help"]) &&
          validateNonEmpty(form["name"], form["name_help"]) &&
          validateNonEmpty(form["phone"], form["phone_help"]) &&
          validateNonEmpty(form["email"], form["email_help"])) {
          // Submit the order to the server
          form.submit();
        } else {
          alert("I'm sorry but there is something wrong with the order information.");
        }
      }
    </script>
  </head>

  <body onload="document.getElementById('message').focus()">
    <div class="heading">
      <img id="logo" src="logo.png" alt="Bannerocity" />
    </div>

    <form name="orderform" action="bannerocity.php" method="POST">
      <div class="field">
        Enter the banner message:
        <input id="message" name="message" type="text" size="32"
          onblur="validateLength(1, 32, this, document.getElementById('message_help'))" />
        <span id="message_help" class="help"></span>
      </div>
      <div class="field">
        Enter ZIP code of the location:
        <input id="zipcode" name="zipcode" type="text" size="5"
          onblur="validateNonEmpty(this, document.getElementById('zipcode_help'))" />
        <span id="zipcode_help" class="help"></span>
      </div>
      <div class="field">
        Enter the date for the message to be shown:
        <input id="date" name="date" type="text" size="10"
          onblur="validateNonEmpty(this, document.getElementById('date_help'))" />
        <span id="date_help" class="help"></span>
      </div>
      <div class="field">
        Enter your name:
        <input id="name" name="name" type="text" size="32"
          onblur="validateNonEmpty(this, document.getElementById('name_help'))" />
        <span id="name_help" class="help"></span>
      </div>
      <div class="field">
        Enter your phone number:
        <input id="phone" name="phone" type="text" size="12"
          onblur="validateNonEmpty(this, document.getElementById('phone_help'))" />
        <span id="phone_help" class="help"></span>
      </div>
      <div class="field">
        Enter your email address:
        <input id="email" name="email" type="text" size="32"
          onblur="validateNonEmpty(this, document.getElementById('email_help'))" />
        <span id="email_help" class="help"></span>
      </div>
      <input type="button" value="Order Banner" onclick="placeOrder(this.form);" />
    </form>
  </body>
</html>
